<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/11/11
  Time: 10:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<div>
    <i class="layui-icon layui-icon-heart-fill" style="color:rgba(238, 143, 92, 0.8);"></i>已满
</div>
<select name="city" id="city">
    <option value="">请选择类型</option>
    <option value="2">二人间</option>
    <option value="3">三人间</option>
    <option value="4">四人间</option>
</select>
<span id="testView"></span>
<div id="test2"></div>
时间:
<button onclick="rili();">rrrr</button>
<div id="test3"></div>


<script>
    var initLayDate = "";
    var $ = "";
    layui.use(['laydate', 'jquery', 'layer'], function () {
        $ = layui.jquery;
        var laydate = layui.laydate;
        var layer = layui.layer;
        /**
         *初始化日期组件 默认几个日期不可用
         */
        initLayDate = {
            getRiLi: function (removedate) {
                var tt = new Object();
                if (removedate == "") {
                    removedate = ['2020-11-12', '2020-12-23', '2020-12-14'];
                }

                for (var i = 0; i < removedate.length; i++) {
                    var sdate = removedate[i]; //记录时间
                    var date_array = sdate.split("-");
                    var date_day = date_array[2]; //取日期的天比如2017-09-11取11
                    tt[removedate[i]] = '<span style="color:#666;font-size: 14px;"><i class="layui-icon layui-icon-heart-fill" style="color:rgba(238, 143, 92, 0.8); position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + Number(date_day) + '</span>';

                    //初始日期控件
                }
                laydate.render({
                    elem: '#test3',
                    min: 1,
                    position: 'static',
                    mark: tt,
                    range: '~',
                    ready: function (value) {

                        var mm = value.year + '-' + value.month + '-' + value.date;
                        $('.layui-laydate table tbody').find('[lay-ymd="' + mm + '"]').removeClass('layui-this');
                        $.each(removedate, function (index, item) {
                            item = changTime(item);
                            $('.layui-laydate table tbody').find('[lay-ymd="' + item + '"]').addClass('laydate-disabled');

                        })
                    },
                    change: function (value) {

                        var dateTime = value.split('~');
                        var startTime = dateTime[0].replace(/-/g, "/");
                        var endTime = dateTime[1].replace(/-/g, "/");

                        var s = Date.parse(startTime);
                        var e = new Date(endTime).getTime();
                        //计算两个时间间隔天数
                        var d = (Number(e) - Number(s)) / (1000 * 60 * 60 * 24);
                        if (d > 30) {
                            layer.msg('最多选择30天');
                        }
                        //如果选择的时间段之内有房间已满的情况就不允许选择
                        var flage = false;
                        $.each(removedate, function (index, item) {
                            item = changTime(item);
                            $('.layui-laydate table tbody').find('[lay-ymd="' + item + '"]').addClass('laydate-disabled');
                            var disabletime = item.replace(/-/g, "/");
                            //不可用的时间在这个时间段之内
                            if (isDuringDate(s, e, disabletime)) {
                                flage = true;
                            }
                        })
                        if (!flage) {
                            $("#test2").text(value);
                            // 关闭日历框
                            $("#test3").html('');
                        } else {
                            layer.msg("当前时间段之内有的房间已满")
                        }
                    }
                });
            }
        }
        initLayDate.getRiLi('');


        //房间类型改变的时候  日期也随着改变
        $("#city").change(function (e) {
            $("#test3").html('');//日历框清空
            //alert($(this).val());
            var removedate = [];
            var typeid = $(this).val();
            if (typeid == 2) {
                removedate = ['2020-11-12', '2020-11-13', '2020-11-14'];
            } else if (typeid == 3) {
                removedate = ['2020-11-15', '2020-11-13', '2020-11-14'];
            } else if (typeid == 4) {
                removedate = ['2020-11-15', '2020-11-16', '2020-11-14'];
            }
            initLayDate.getRiLi(removedate);
        })
    });


    //某个时间段室内是否含有这个时间如果含有就返回true 否则就false
    function isDuringDate(beginDateStr, endDateStr, dateStr) {
        var curDate = new Date(dateStr),
            beginDate = new Date(beginDateStr),
            endDate = new Date(endDateStr);
        if (curDate >= beginDate && curDate < endDate) {
            return true;
        }
        return false;
    }

    function rili() {
        var con = $("#test3").html();
        if (con == "") {
            initLayDate.getRiLi('');
        }

    }

    /**
     * 将2020-01-01 这种时间改为 2020-1-1
     * * @param time
     */
    function changTime(items) {
        var time = items.split("-");
        var year = time[0];
        var month = time[1];
        if (Number(month) < 10) {
            //将数据库中传过来的01变为1
            month = Number(month);
            //alert(Number(month));
        }
        var day = time[2];
        if (Number(day) < 10) {
            //将数据库中传过来的01变为1
            day = Number(day);
        }
        var item = year + "-" + month + "-" + day;
        return item;

    }
</script>
</body>
</html>

